import React, {Component} from 'react';
import {connect} from 'dva';
import Loading from "../component/Loading";
import Loadable from 'react-loadable';


/*const Home = Loadable({
    loader: () => import('../page/general/home/index.js'),
    loading: Loading
});*/
const OngoingCourse = Loadable({
    loader: () => import('../page/OngoingCourse/index.js'),
    loading: Loading
});
const Achievements = Loadable({
    loader: () => import('../page/Achievements/index.js'),
    loading: Loading
});
const Article = Loadable({
    loader: () => import('../page/Article/index.js'),
    loading: Loading
});
const Chats = Loadable({
    loader: () => import('../page/Chats/index.js'),
    loading: Loading
});
const Congrats = Loadable({
    loader: () => import('../page/Congrats/index.js'),
    loading: Loading
});
const CourseContent = Loadable({
    loader: () => import('../page/CourseContent/index.js'),
    loading: Loading
});
const CourseDetails = Loadable({
    loader: () => import('../page/CourseDetails/index.js'),
    loading: Loading
});
const FavCourses = Loadable({
    loader: () => import('../page/FavCourses/index.js'),
    loading: Loading
});
const Filter = Loadable({
    loader: () => import('../page/Filter/index.js'),
    loading: Loading
});
const Friend = Loadable({
    loader: () => import('../page/Friend/index.js'),
    loading: Loading
});
const Home = Loadable({
    loader: () => import('../page/Home/index.js'),
    loading: Loading
});
const InfiniteScrollPage = Loadable({
    loader: () => import('../page/InfiniteScrollPage/index.js'),
    loading: Loading
});
const Form1 = Loadable({
    loader: () => import('../page/Form/index.js'),
    loading: Loading
});
const RouterTest = Loadable({
    loader: () => import('../page/RouterTest/index.js'),
    loading: Loading
});
import {routerRedux} from 'dva/router';
import {BrowserRouter as Router, Route, Switch, Redirect, Link} from "react-router-dom";
import {setHistory} from "../util/uitls";


const {ConnectedRouter} = routerRedux;
import {AnimatedSwitch, spring} from 'react-router-transition';

function mapStyles(styles) {
    return {
        opacity: styles.opacity,
        transform: `translateX(${styles.x}px)`,
    };
}

// wrap the `spring` helper to use a bouncy config
function bounce(val) {
    return spring(val, {
        stiffness: 330,
        damping: 22,
    });
}

// child matches will...
const bounceTransition = {
    // start in a transparent, upscaled state
    atEnter: {
        opacity: 0,
        // scale: 1.2,
        x: 750
    },
    // leave in a transparent, downscaled state
    atLeave: {
        opacity: bounce(0),
        // scale: bounce(0.8),
        x: bounce(-100)
    },
    // and rest at an opaque, normally-scaled state
    atActive: {
        opacity: bounce(1),
        x: bounce(0)
        // scale: bounce(1),
    },
};

export default ({history, app}) => {
    return (<ConnectedRouter history={history}>
            <Switch>
                {
                    setHistory(history)
                }
                <AnimatedSwitch
                    atEnter={bounceTransition.atEnter}
                    atLeave={bounceTransition.atLeave}
                    atActive={bounceTransition.atActive}
                    mapStyles={mapStyles}
                    className="switch-wrapper"
                >
                    {/*<Route exact path="/" component={()=><div>home</div>}/>*/}
                    <Route exact path="/" component={InfiniteScrollPage}/>
                    <Route exact path="/ongoingCourse" component={OngoingCourse}/>
                    <Route exact path="/article" component={Article}/>
                    <Route exact path="/achievements" component={Achievements}/>
                    <Route exact path="/chats" component={Chats}/>
                    <Route exact path="/congrats" component={Congrats}/>
                    <Route exact path="/courseContent" component={CourseContent}/>
                    <Route exact path="/courseDetails" component={CourseDetails}/>
                    <Route exact path="/favCourses" component={FavCourses}/>
                    <Route exact path="/filter" component={Filter}/>
                    <Route exact path="/friend" component={Friend}/>
                    <Route exact path="/home" component={Home}/>
                    <Route exact path="/form" component={Form1}/>
                    <Route path="/router-test" component={RouterTest}/>
                </AnimatedSwitch>
            </Switch>
        </ConnectedRouter>
    );
}

